<script>
import { areaList } from "@vant/area-data";
import { mapGetters, mapActions } from "vuex";
import { updateProfile } from "../../api/otherServer";
import { v4 as uuidv4 } from "uuid";
import { Notify } from "vant";
export default {
  //接受父组件穿过的函数
  props: ["hideAdress", "showSelectaddress"],
  data() {
    return {
      areaList, //全国省市区数据
      show: false,
      chosenAddressId: "", //显示地址编辑窗
      isDelete: false, //是否显示删除按钮
      addressInfo: {},
    };
  },
  mounted() {
    for (let i = 0; i < this.address.length; i++) {
      if (this.address[i].isDefault) {
        this.showSelectaddress(this.address[i]);
        this.chosenAddressId = this.address[i].id;
        console.log(this.address[i]);
        break;
      }
    }
  },
  computed: {
    ...mapGetters("usermessage", ["myaddress", "getProfile", "address"]),
  },
  methods: {
    ...mapActions("usermessage", [
      "setprofileActions",
      "setprofileActionsaddress",
    ]),
    onAdd() {
      this.show = true;
      this.isDelete = false;
      this.addressInfo = {}; //点击添加初始数据为空对象
    },
    onEdit(content) {
      this.show = true;
      this.addressInfo = content; //点击编辑把初始的数据填写到填写框
      this.isDelete = true;
    },
    onSave(content) {
      //save保存的时候需要根据init是否有值
      let data = {
        ...content,
        address: `${content.province}${content.city}${content.county}${content.addressDetail}`,
      };
      if (this.addressInfo.id) {
        for (let i = 0; i < this.address.length; i++) {
          if (this.addressInfo.id === this.address[i].id) {
            this.address[i] = { ...this.address[i], ...data };
            break;
          }
        }
      } else {
        this.address.push({ ...data, id: uuidv4() });
      }
      //默认地址只能有一个所以我们在设置默认值的时候要把所有的默认值的清理掉
      if (content.isDefault) {
        for (let i = 0; i < this.address.length; i++) {
          if (this.address[i].id !== content.id) {
            this.address[i].isDefault = false;
          }
        }
      }
      this.setprofileActionsaddress({ data: this.address }).then(() => {
        Notify({ type: "success", message: "添加成功" });
        this.show = false;
      });
    },

    onDelete() {
      for (let i = 0; i < this.address.length; i++) {
        if (this.address[i].id === this.addressInfo.id) {
          this.address.splice(i, 1);
          break;
        }
      }
      this.setprofileActionsaddress({ data: this.address }).then(() => {
        Notify({ type: "success", message: "删除成功" });
        this.show = false;
      });
    },
    onSelect(con) {
      this.showSelectaddress(con);
      console.log(con);
    },
  },
};
</script>

<template>
  <van-nav-bar
    title="收货地址"
    left-arrow
    @click-left="hideAdress('car')"
    fixed
    placeholder
  />
  <van-address-list
    v-model="chosenAddressId"
    :list="address"
    :disabled-list="disabledList"
    default-tag-text="默认"
    @add="onAdd"
    @edit="onEdit"
    @select="onSelect"
  />
  <van-popup v-model:show="show">
    <van-address-edit
      :area-list="areaList"
      show-postal
      :address-info="addressInfo"
      :show-delete="isDelete"
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
  /></van-popup>
</template>
<style lang="scss">
.van-nav-bar__placeholder {
  height: 46px;
}
</style>
